/* ---------------------------------------------------------------------- */
/*  Theme Default
/* ---------------------------------------------------------------------- */
@import "modules/css3-mixins";
@import "modules/variables";
$base-color: #F6F6F6;
$header-color : #EFEFEF;
$label-color : $azure;

body {
  background-color: $base-color !important;
   &.layout-boxed {
    background: url("../../images/bg_3.png") $base-color;
  }
}
.main-container, #pageslide-left, #pageslide-right {
  background-color: $base-color !important;
}
.label-default, .badge-default {
   background: $label-color !important;
}
.topbar {
  background: $header-color;
  @include background-gradient(lighten($header-color,10%) 0px, $header-color 100%);
  > .container .navbar-brand, .logo  {
    color: darken($base-color,45%);
  }
  .sb-toggle-left i {
    color: darken($base-color,55%);
  }
  .topbar-tools > ul > li {
    > a {
      color: darken($base-color,85%);
    }
    &.right-menu-toggle > a {
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: $header-color;
    }
  }
  .nav li.dropdown.open > .dropdown-toggle, .nav li.dropdown.active > .dropdown-toggle, .nav li.dropdown.open.active > .dropdown-toggle {
    background: none;
    color: darken($base-color,45%);
  }
  .nav > li:hover > a, .nav > li:active > a, .nav > li > a:focus {
    color: darken($base-color,45%);
    background: none;
  }
}
ul.main-navigation-menu > li {

  a {
    border-bottom: none;
    border-top-color: darken($base-color,5%);
    color: darken($base-color,85%);
    i {
      color: desaturate(darken($base-color,25%),15%);
      font-weight: normal;
    }
  }
  &.active > a {
    background: desaturate(darken($base-color,6%),5%) !important;
    border-top: none !important;
    color: $black;
    i {
      color: $black;
    }
  } 
}
ul.main-navigation-menu li > ul.sub-menu > li > a:hover {
    background: desaturate(darken($base-color,6%),5%);
}
ul.main-navigation-menu li > ul.sub-menu > li.open > a, ul.main-navigation-menu li > ul.sub-menu > li.active > a, ul.main-navigation-menu li > ul.sub-menu > li.open > a:hover, ul.main-navigation-menu li > ul.sub-menu > li.active > a:hover {
    background: darken($base-color,2%);
}
ul.main-navigation-menu > li.open > a, ul.main-navigation-menu > li > a:hover, ul.main-navigation-menu > li:hover > a {
  background-color: darken($base-color,2%);
}
ul.main-navigation-menu  li.divider {
  background-color: darken($base-color,5%) !important;
}

ul.main-navigation-menu > li.open > a, ul.main-navigation-menu > li > a:hover, ul.main-navigation-menu > li:hover > a {
  background-color: darken($base-color,2%);
}

ul.main-navigation-menu  li.dropdown-header, ul.main-navigation-menu .mega-menu-sub-title {
  color: desaturate(darken($base-color,30%),10%) !important;
}
ul.main-navigation-menu  li.dropdown-header, ul.main-navigation-menu .mega-menu-sub-title {
  color: desaturate(darken($base-color,30%),10%) !important;
}
ul.main-navigation-menu .mega-menu .mega-menu-content ul.mega-sub-menu a {
  color: darken($base-color,85%)!important;
  &:hover {
    background: none !important;
  }
}
ul.main-navigation-menu .mega-menu .mega-menu-content ul.mega-sub-menu li.active a, ul.main-navigation-menu .mega-menu .mega-menu-content ul.mega-sub-menu li.active a:hover, ul.main-navigation-menu .mega-menu .mega-menu-content ul.mega-sub-menu li.active a:focus {
  background-color: desaturate(darken($base-color,6%),5%) !important;
  text-decoration: none;
}
ul.main-navigation-menu .mega-menu .mega-menu-content ul.mega-sub-menu li a:hover {
  background-color: desaturate(darken($base-color,6%),5%) !important;
  text-decoration: none;
}
#horizontal-menu {
  .container {
    background: $base-color;
  }
  .navbar-collapse {
    .navbar-nav {
      > li {
        > a {
          color: darken($base-color,45%);
          &:hover {
            color: darken($base-color,85%); 
            background: darken($base-color, 5%);
          }
          &:active, &:focus {
            background: darken($base-color, 10%);
          }
        }
        &.active {
          > a {
            color: lighten($base-color,85%); 
            background: $label-color;
            &:after {
              border-top-color: $label-color;
            }
          }

        }
      }
    }
  }
}
.main-content {
  background: #DDDDDD;
}
.go-top {
  color: darken($base-color,45%);
}
.footer-inner {
  color: darken($base-color,45%);
}
#pageslide-left {
  .navigation-toggler {   
     .sb-toggle-left {
        background: url(../../images/dark_dots.png) no-repeat center center;
    }
  }

  .slide-tools {
      background-color: darken($base-color,5%);
  }
  .btn {
        color: transparentize($black, .7); 
        &:hover {
            color: $black;
            background-color: transparentize(darken(darken($base-color,10%),2%), .6); 
        }
    }
  .user-profile {
      border-color: darken($base-color,5%);
      position: relative; 
      h5{
        color: desaturate(darken($base-color,30%),10%);
      }
      h4 {
        color: $black;
      }
  } 
}
.closedbar {
  background: darken($base-color,5%) url(../../images/dark_dots.png) no-repeat center 5px !important;
  &:hover {
    background-color: $base-color !important;
  }
}
#pageslide-right {
  .pageslide-title {
    color: transparentize($black,.6);
  }
  .notifications {
  a {
    color: darken($base-color,45%);
    background: darken($base-color,5%);
    &:hover{
      background: darken($base-color,10%);
    }
    .time {
      color: desaturate(darken($base-color,30%),30%);
    }
  }
}
}
#style_selector_container {
  .box-title {
    color: transparentize($black,.2) !important;
  }
  .images {
    border-bottom: 1px solid darken($base-color,5%);
    img.active {
      border: 2px solid darken($base-color,65%);
    }
  }
}
footer {
  background-color: $base-color;
}